<template>
  <div>
    <div
      class="banner-box flex-center bg-[url('~/assets/images/product/lzd_zf_banner.png')] bg-cover bg-no-repeat"
    >
      <div class="banner-con">
        <h1 class="banner-main-title">联筑达·智慧工地政府级监管平台</h1>
        <p class="mt-10 banner-text xl:w-[37vw]">
          联筑达·智慧工地政府级监管平台，
          基于AIoT、5G、云计算、移动互联网和物联网等领先技术开发，依托丰富多样的智慧工地硬件设备，紧密围绕人、机、料、法、环五大质量管理要素，为住建局、质安站等政府部门提供覆盖全生命周期的数字化监管解决方案。
        </p>
      </div>
    </div>

    <div
      class="pt-12 pb-20 bg-[url('~/assets/images/product/lzd_zf_intro_banner.png')] bg-image-base bg-center"
    >
      <div class="module-con space-y-8">
        <div
          class="flex flex-col md:flex-row items-center py-8 px-7 md:px-14 rounded shadow"
        >
          <div>
            <div class="text-xl text-[#e9e9e9] uppercase">data board</div>
            <h2 class="card-title-main md:!text-2xl">
              一张“数据看板”，实现辖区在建项目全局监管
            </h2>
            <div class="card-title-bar mt-8"></div>
            <p class="mt-8 text-base text-[#616666] md:w-[80%]">
              监管部门辖区内施工项目点多面广，传统监管手段难以满足精细化、数字化监管需求。
              智慧工地政府级监管平台，是监管部门对辖区项目全局监管的“大脑”，通过“GIS地图数据看板”，可将辖区所有在建项目监管数据汇总，以看板形式动态化呈现，项目信息一目了然，实现全局监管。
            </p>
          </div>
          <img
            alt="联筑达·智慧工地政府级监管平台"
            class="w-full md:w-[32%] h-fit"
            src="../../assets/images/product/lzd_zf_example.png"
          />
        </div>

        <div
          class="flex flex-col md:flex-row items-center py-8 px-7 md:px-14 rounded shadow"
        >
          <img
            class="w-full md:w-[32.6%] h-fit"
            src="../../assets/images/product/lzd_zf_pc.png"
          />
          <div class="md:ml-14">
            <div class="text-xl text-[#e9e9e9] uppercase">
              Real time early warning mechanism
            </div>
            <h2 class="card-title-main md:!text-2xl">
              实时预警机制，远程下达整改通知
            </h2>
            <div class="card-title-bar mt-8"></div>
            <p class="mt-8 text-base text-[#616666] md:w-[80%]">
              监管数据通过可视化大屏实时展示，建立预警机制，对违规操作及时报警提示，监管人员可远程下达整改通知，并监督整改效果。满足主管部门日常监管需要，提升监管效率。
            </p>
          </div>
        </div>

        <div
          class="flex flex-col md:flex-row items-center py-8 px-7 md:px-14 rounded shadow"
        >
          <div>
            <div class="text-xl text-[#e9e9e9] uppercase">
              Mobile law enforcement
            </div>
            <h2 class="card-title-main md:!text-2xl">
              手机移动执法，高效便捷监管
            </h2>
            <div class="card-title-bar mt-8"></div>
            <p class="mt-8 text-base text-[#616666] md:w-[80%]">
              可通过手机小程序，对所有项目进行在线移动执法和监管，所有数据与监管大屏保持一致。高效便捷，随时随地落实监管主体责任。
            </p>
          </div>
          <img
            class="w-full md:w-[25%] h-fit"
            src="../../assets/images/product/lzd_zf_phone.png"
          />
        </div>
      </div>
    </div>

    <div class="py-[90px]">
      <div class="module-con">
        <h2 class="text-[26px] text-[#222] font-extrabold text-center">
          监管范围覆盖项目全生命周期
        </h2>
        <p class="text-[#1393FF] mt-12 mb-14 text-center">
          从“人的不安全行为”，到“物的不安全状态”，再到生态环境监测。智慧工地政府级监管平台实现建筑项目
          全生命周期监管，极大地提升数字化建造水平。
        </p>
        <div class="flex justify-between">
          <img
            class="w-[23.3%]"
            src="../../assets/images/product/lzd_zf_01.png"
          />
          <img
            class="w-[23.3%]"
            src="../../assets/images/product/lzd_zf_02.png"
          />
          <img
            class="w-[23.3%]"
            src="../../assets/images/product/lzd_zf_03.png"
          />
          <img
            class="w-[23.3%]"
            src="../../assets/images/product/lzd_zf_04.png"
          />
        </div>
      </div>
    </div>

    <div class="py-[90px] bg-gradient-to-b from-[#F6FBFF] to-[#FFFFFF]">
      <div class="module-con">
        <h2 class="module-title">平台优势</h2>
        <div class="space-y-8 mt-10">
          <div
            v-for="(item, index) in traitList"
            :key="index"
            style="background-size: 100% 100%"
            class="flex items-center py-6 px-14 bg-[url('~/assets/images/product/lzd_trait_bg.png')]"
          >
            <img
              class="w-full max-w-[104px] hidden md:block"
              :src="
                require(`../../assets/images/product/lzd_trait_0${
                  index + 1
                }.png`)
              "
            />
            <div class="value-line ml-12 mr-8 hidden md:block"></div>
            <div class="">
              <p class="text-[#008AFF] text-lg">{{ item.name }}</p>
              <p class="text-[#666] mt-3">{{ item.content }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      traitList: [
        {
          name: '全方位感知',
          content:
            '利用物联网、云计算等技术手段，实时监测在建工地全方位的施工情况，数据获取精准及时，可对施工过程进行全面感知、互联互通、智能处理和协同工作。',
        },
        {
          name: '集成化管理',
          content:
            '通过特定的数据标准与规范的接口协议，将整个工地的施工管理流程集成到监管平台， 创建协同工作环境，提升管理效率。',
        },
        {
          name: '科学化决策',
          content:
            '采集项目生产、运营全流程产生的数据，建立企业信息模型，以统计图表等形式可视化呈现，为管理人员提供科学分析、决策依据，实现辅助决策功能。',
        },
        {
          name: '行业化监管',
          content:
            '联筑达·智慧工地政府监管平台的监管层数据可纳入智慧住建体系，通过软硬件设备链接，生成并建立专属数据库，采用分布式架构，形成“数据中台”，有效实现行业监管。',
        },
        {
          name: '信息可溯源',
          content:
            '平台拥有完整的项目信息管理系统，集人，机，料，法，环等多种数据于一体，每一条数据都有相对应的设备支撑，信息完整且便于追溯。',
        },
      ],
    }
  },
  head: {
    title: '联筑达·智慧工地政府监管平台-联合智为',
    meta: [
      {
        hid: 'index-keywords',
        name: 'keywords',
        content: '联筑达·智慧工地政府监管平台',
      },
      {
        hid: 'index-desc',
        name: 'description',
        content:
          '联筑达·智慧工地政府级监管平台， 基于AIoT、5G、云计算、移动互联网和物联网等领先技术开发，依托丰富多样的智慧工地硬件设备，紧密围绕人、机、料、法、环五大质量管理要素，为住建局、质安站等政府部门提供覆盖全生命周期的数字化监管解决方案。',
      },
    ],
  },
  mounted() {},
}
</script>

<style scoped>
.value-line {
  width: 2px;
  height: 112px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    #2e83fa 53%,
    rgba(255, 255, 255, 0) 100%
  );
}
</style>
